<!DOCTYPE html>
<html lang="{{ site.lang | default: " en-US" }}">
<head>
    <meta charset="UTF-8">

    {% seo title=false %}
    <title>{{ page.title | default: site.title | append: ' | ' | append: site.tag_line }}</title>
    <meta property="og:image" content="https://mockk.io/doc/stats-shared.png"/>
    <meta name="description"
          content="{{ page.description | default: site.description | default: site.github.project_tagline }}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#f38b1c">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
    <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
    <link rel="stylesheet"
          type="text/css"
          href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css"/>

    <script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"
            data-cfasync="false"></script>


    <style>
        .main-content > ul:first-of-type {
            list-style-position: inside;
        }

        .main-content ul {
            list-style-type: circle;
        }

        .charitytext {
            font-family: 'Slabo 27px', serif;
            font-size: 30px;
        }

        .helpmasha {
            padding: 15px;
            display: flex;
        }

        .helpmasha > .centered {
            font-size: 35px;
            display: inline-block;
            margin: auto;
        }

        .helpmasha img {
            margin-right: 5px;
        }

        .page-header {
            padding-bottom: 10px;
        }

        .main-content {
            padding-top: 0;
        }

        .idea {
            color: white;
            background: #0086B3;
            padding: 10px;
            width: 100%;
            /*display: none;*/
        }

        .idea .input {
            display: block;
            height: 0;
            overflow-y: hidden;
        }

        .idea .input.show {
            display: flex;
            height: auto;
            overflow-y: auto;
            justify-content: center;
        }

        .idea .input textarea::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        .idea a {
            color: rgba(255, 255, 255, 0.9);
        }

        .idea .input textarea {
            display: inline-block;
            margin-bottom: 1rem;
            color: rgba(255, 255, 255, 0.7);
            background-color: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.2);
            border-style: solid;
            border-width: 1px;
            border-radius: 0.3rem;
            transition: height 0.5s ease;
            resize: none;
            height: 70px;
            width: 30em;
            overflow: hidden;
            padding: 10px;
            outline: none;
        }

        .btn.selected {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            background-color: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3)
        }

        .idea .input.show textarea:focus {
            height: 50vh;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .idea.focused .input.show textarea {
            height: 50vh;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .idea .input textarea.writing {
            border-color: rgba(0, 255, 0, 0.7)
        }

        .idea .input textarea::-webkit-scrollbar {
            width: 5px;
        }

        .idea .input textarea::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 3px;
        }

        .idea .input textarea::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
        }

        .idea .input textarea::scrollbar-thumb:window-inactive {
            background: rgba(255, 255, 255, 0.4);
        }

        .idea .bar {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
        }

        @media screen and (max-width: 42em) {
            .idea .bar {
                flex-direction: column;
            }

            .idea .input textarea {
                width: calc(100% - 20px);
            }
        }

        .idea .header {
            font-weight: bold;
            color: rgba(255, 255, 255, 0.7);
            padding: 15px;
        }

        .idea .header small {
            font-weight: 100;
        }

    </style>
    <script>
        var stats = [];

        function showNextMessage() {
            var statItem = stats[Math.floor(Math.random() * stats.length)];

            var city = statItem.city;
            var country = statItem.country;
            var users = statItem.users;

            var messageElement = document.getElementById("message");
            messageElement.innerHTML = "Hello from " + city + ", " + country + ". " + users + " MockK users reside there. <a href='javascript: showNextMessage();'/>Next...</a></br><span style='font-size: 80%'>Participate a small flash mob. Just place a flag Emoji in <a href='https://kotlinlang.slack.com/archives/C9EJFT6DB/p1626042963069100'>#mockk slack</a>!</span>";
            return false;
        }

        function handlePageLoad() {
            fetch("/usage-stats-30days.txt")
                .then(result => {
                    if (result.status !== 200) {
                        return Promise.reject("failed to fetch stats");
                    } else {
                        return Promise.resolve(result);
                    }
                })
                .then(it => it.text())
                .then(data => {
                    for (var row of data.split("\n")) {
                        var arr = row.split("\t");
                        if (arr.length !== 3) {
                            continue;
                        }
                        var city = arr[0];
                        var country = arr[1];
                        var users = parseInt(arr[2]);

                        if (city.indexOf("(not set)") !== -1) {
                            continue;
                        }

                        if (country.indexOf("(not set)") !== -1) {
                            continue;
                        }

                        stats.push({city: city, country: country, users: users});
                    }
                    showNextMessage();
                })
                .catch(console.error);
        }
    </script>
</head>
<body onload="handlePageLoad()">
<section class="page-header">
    <h1 class="project-name"><a href="/">{{ site.title | default: site.github.repository_name }}</a></h1>
    <h2 class="project-tagline">{{ site.tag_line | site.description | default: site.github.project_tagline }}</h2>
    {% if site.github.is_project_page %}
    <a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a>
    </br>
    {% endif %}
    {% if site.show_downloads %}
    <a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
    <a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
    {% endif %}
</section>

<section class="idea" id="idea-section">
    <style>
        .idea .message-text2 {
            display: none
        }

        @media (max-width: 760px) {
            .idea .message-text2 {
                display: block
            }
        }

        .idea .message-text {
            display: block
        }

        @media (max-width: 760px) {
            .idea .message-text {
                display: none
            }
        }
    </style>
    <div class="bar" id="idea-bar" style="background: transparent; padding: 15px; text-align: center;">
        <a href="https://effective-retro.com/" class="btn" style="display: flex; vertical-align:center; gap: 5px">Try
            
            
            effective-retro.com - free retrospective boards →</a>
    </div>

    <div class="input" id="idea-input">
        <textarea id="idea-input-textarea"></textarea>
    </div>
</section>

<section class="main-content">
    {{ content }}

    <footer class="site-footer">
        Powered by <a rel="nofollow" href="https://www.ej-technologies.com/products/jprofiler/overview.html">Java
        profiler</a>,
        <a rel="nofollow" href="https://www.jetbrains.com/idea/download/"/>IntelliJ IDEA</a> and
        <a rel="nofollow" href="https://www.jetbrains.com/clion/?">CLion</a>
    </footer>
</section>

{% if site.google_analytics %}
<script type="text/javascript">
    function getCookie(name) {
        var b = document.cookie.match('(^|[^;]+)\\s*' + name + '\\s*=\\s*([^;]+)');
        return b ? b.pop() : '';
    }

    function addAnalytics() {
        var scriptTag = document.createElement('script');
        scriptTag.async = true;
        scriptTag.src = 'https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}';
        document.head.appendChild(scriptTag);

        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
        ga('create', '{{ site.google_analytics }}', 'auto');
        ga('send', 'pageview');

        function _gaLt(event) {

            /* If GA is blocked or not loaded, or not main|middle|touch click then don't track */
            if (!ga.hasOwnProperty("loaded") || ga.loaded != true || (event.which != 1 && event.which != 2)) {
                return;
            }

            var el = event.srcElement || event.target;

            /* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */
            while (el && (typeof el.tagName == 'undefined' || el.tagName.toLowerCase() != 'a' || !el.href)) {
                el = el.parentNode;
            }

            /* if a link with valid href has been clicked */
            if (el && el.href) {

                var link = el.href;

                /* Only if it is an external link */
                if (link.indexOf(location.host) == -1 && !link.match(/^javascript\:/i)) {

                    /* Is actual target set and not _(self|parent|top)? */
                    var target = (el.target && !el.target.match(/^_(self|parent|top)$/i)) ? el.target : false;

                    /* Assume a target if Ctrl|shift|meta-click */
                    if (event.ctrlKey || event.shiftKey || event.metaKey || event.which == 2) {
                        target = "_blank";
                    }

                    var hbrun = false; // tracker has not yet run

                    /* HitCallback to open link in same window after tracker */
                    var hitBack = function () {
                        /* run once only */
                        if (hbrun) return;
                        hbrun = true;
                        window.location.href = link;
                    };

                    if (target) { /* If target opens a new window then just track */
                        ga(
                            "send", "event", "Outgoing Links", link,
                            document.location.pathname + document.location.search
                        );
                    } else { /* Prevent standard click, track then open */
                        event.preventDefault ? event.preventDefault() : event.returnValue = !1;
                        /* send event with callback */
                        ga(
                            "send", "event", "Outgoing Links", link,
                            document.location.pathname + document.location.search, {
                                "hitCallback": hitBack
                            }
                        );

                        /* Run hitCallback again if GA takes longer than 1 second */
                        setTimeout(hitBack, 1000);
                    }
                }
            }
        }

        var _w = window;
        /* Use "click" if touchscreen device, else "mousedown" */
        var _gaLtEvt = ("ontouchstart" in _w) ? "click" : "mousedown";
        /* Attach the event to all clicks in the document after page has loaded */
        _w.addEventListener ? _w.addEventListener("load", function () {
                document.body.addEventListener(_gaLtEvt, _gaLt, !1)
            }, !1)
            : _w.attachEvent && _w.attachEvent("onload", function () {
            document.body.attachEvent("on" + _gaLtEvt, _gaLt)
        });

    }

    window.addEventListener("load", function () {
        const cookieConsent = getCookie('cookieconsent_status');

        if (cookieConsent === 'allow') {
            addAnalytics();
        }

        window.cookieconsent.initialise({
            "palette": {
                "popup": {
                    "background": "#efefef",
                    "text": "#404040"
                },
                "button": {
                    "background": "#8ec760",
                    "text": "#ffffff"
                }
            },
            "type": "opt-out",
            "content": {
                "allow": "Approve",
                "dismiss": "Approve",
                "deny": "Reject"
            },
            onStatusChange: function (status, chosenBefore) {
                location.reload();
            }
        })
    });
</script>

{% endif %}
</body>
</html>
